import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:test_app/core/utils/common/common_util.dart';
import 'weiget/layout_view.dart';
import 'my_controller.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'package:test_app/core/base/base/base_view.dart';
import 'package:test_app/core/design_system/extensions/extensions.dart';

class MyView extends BaseView<MyController> {
  const MyView({super.key});

  @override
  String? get navTitle => "我的";

  @override
  bool get navBackBtn => false;

  @override
  body() {
    return Obx(() {
      return [
        ...controller.myState.layoutList.map(
              (item) =>
              LayoutView(
                title: item.title,
                description: item.description,
                icon: item.icon,
                onTap: item.onTap,
              ),
        ),
        picker(),
        gridBox(),
        position(),
        centerStack(),
        flexBox()
      ].toColumn(spacing: 10).padAll(10).bouncingScroll();
    });
  }


  Widget picker() {

    return Builder(builder: (BuildContext context) => Obx(() {

      final myState = controller.myState;

      return TDCell(
        title: '选择城市',
        note: myState.selected.isEmpty ? '请选择' : myState.selected.value,
        arrow: true,
        style: TDCellStyle(backgroundColor: Colors.amber, padding: EdgeInsets.all(16)),
        onClick: (click) {
          TDPicker.showMultiLinkedPicker(
            context,
            title: '联动选择器',
            onConfirm: (selected) {
              controller.setSelected(selected);
              CommonUtil.closePop();
            },
            data: myState.options,
            columnNum: 3,
            initialData: myState.selected.isEmpty ? ['浙江省', '杭州市', '西湖区'] : myState.selected.value.split(' '),
          );
        },
      ).clipRadius(10);
    }));
  }


  Widget gridBox() {
    final List<Widget> textList = [];
    for (int i = 1; i <= 4; i++) {
      final Widget text = Text(i.toString()).height(i == 4 ? 20 : 50).backgroundColor(Colors.amberAccent);
      textList.add(text);
    }

    return textList.toGridWrap(count: 3, alignment: WrapAlignment.end).size(200, 100).alignment(Alignment.topLeft);
  }
  
  Widget flexBox() {
    final List<Widget> textList = [];
    for (int i = 1; i <= 4; i++) {
      final Widget text = Text(i.toString()).height(i == 4 ? 20 : 50).width(80).backgroundColor(Colors.amberAccent);
      textList.add(text);
    }

    return textList.toFlexWrap(count: 3, mainAxisAlignment: MainAxisAlignment.start);
  }

  Widget position() {

    return [
      Text('左上').positioned(left: 0, top: 0),
      Text('右下').positioned(right: 0, bottom: 0),
      Text('中').center().size(100, 50).backgroundColor(Colors.deepOrangeAccent).alignment(Alignment.centerLeft),
    ].toStack().backgroundColor(Colors.amber).size(200, 200);
  }

  Widget centerStack() {
    return [
      Container(
        width: 30,
        height: 6,
        color: Colors.yellow,
      ).clipRadius(4).positioned( bottom: 0, right: 3),
      Text('这是一个标题')
    ].toStack(clipBehavior: Clip.none);
  }
}
